<template>
    <div class="findCourseDiv">
        <el-card class="findCourseCard">
            <el-form :inline="true" class="findForm">
                <el-form-item label="学院">
                    <el-cascader :options="college" v-model="collegeAndspeciality" style="width: 300px"></el-cascader>
                </el-form-item>

                <el-form-item label="年级">
                    <el-select v-model="grade" placeholder="开课年级" style="width: 140px">
                        <el-option value="大一"></el-option>
                        <el-option value="大二"></el-option>
                        <el-option value="大三"></el-option>
                        <el-option value="大四"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="findCourse">查询</el-button>
                </el-form-item>

            </el-form>
        </el-card>
        <el-card class="courseCard">
            <el-table :data="courseList" height="250" border style="width: 100%">
                <el-table-column label="课程名称" width="300">
                    <template slot-scope="scope">
                        <!-- <el-link :href="scope.row.url" type="primary" target="_blank">{{scope.row.courseName}}</el-link> -->
                        <router-link
                            :to="{ path: '/user/course/' + scope.row.courseNumber, params: { courseNumber: scope.row.courseNumber } }"
                            :target="_self">
                            <span style="color:blue">
                                {{ scope.row.courseName }}
                            </span>
                        </router-link>
                    </template>
                </el-table-column>

                <el-table-column label="课程学分">
                    <template slot-scope="scope">
                        {{ scope.row.credit }}
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>

</template>

<script>


export default {
    data() {
        return {
            collegeAndspeciality: ["学院", "专业"],
            grade: "",
            college: [
                {
                    label: "计算机学院",
                    value: "计算机学院",
                    children: [
                        {
                            label: "计算机科学与技术",
                            value: "计算机科学与技术"
                        },
                        {
                            label: "软件工程",
                            value: "软件工程"
                        },
                        {
                            label: "人工智能",
                            value: "人工智能"
                        }
                    ]
                }
            ],

            courseList: [
            ]


        }
    },
    methods: {
        findCourse() {
            console.log("您的学院是" + this.collegeAndspeciality[0] + "\n您的专业是" + this.collegeAndspeciality[1] + "\n您的年级是" + this.grade);

            //加上查询条件参数
            this.$axios.get("http://localhost:8000/course/getCourseList", {
                params: {
                    college: this.collegeAndspeciality[0],
                    major: this.collegeAndspeciality[1],
                    grade: this.gradeToNum(this.grade),
                },
                headers: {
                    Authorization: sessionStorage.getItem('access-admin')
                }
            })
                .then(res => {
                    console.log(res.data)
                    this.courseList = res.data;
                })
                .catch(err => {
                    console.log(err)
                    this.$message.error(err.response.data.message)
                })
        },
        gradeToNum(grade) {
            if (grade == "大一") {
                return 1;
            }
            else if (grade == "大二") {
                return 2;
            }
            else if (grade == "大三") {
                return 3;
            }
            else if (grade == "大四") {
                return 4;
            }
        }



    }
}
</script>

<style lang="scss">
.findCourseDiv {
    position: relative;

    .findCourseCard {
        width: 800px;
        margin: auto
    }

    .courseCard {
        width: 800px;
        margin: 10px auto
    }
}
</style>